import React, { memo, useEffect, useState } from 'react'
import { Space, Table, Popconfirm, Drawer, Form, Input, Button, Row, Col, Tag } from 'antd'
import { add, del, search, details, list, upData } from '../api/shop'
const Type = memo(() => {
    const [shopping, setShopping] = useState([])
    const getShopping = async () => {
        let res = await list()
        setShopping(res)
    }
    useEffect(() => {
        getShopping()
    }, [])
    const columns = [
        {
            title: '商品名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Popconfirm
                        placement="top"
                        title='删除'
                        description="你确定要删除吗？"
                        onConfirm={() => {
                            del(record.id)
                            getShopping()
                        }}
                        okText="确定"
                        cancelText="取消"
                    >

                        <a>删除</a>
                    </Popconfirm>
                    <a onClick={() => onEdit(record.id)}>编辑</a>
                </Space>
            ),
        },
    ];
    // 抽屉
    const [title, setTitle] = useState('新增')
    const [open, setOpen] = useState(false);
    const onClose = () => {
        setOpen(false);
    };
    const [shopForm] = Form.useForm()
    // 编辑
    const onEdit = async (id) => {
        setTitle('编辑')
        setOpen(true);
        let res = await details(id)
        shopForm.setFieldsValue(res)
        setId(id)
    }
    const [id, setId] = useState('')
    // 表单提交
    const onFinish = async (values) => {
        if (id === '') {
            await add({ ...values, key: new Date().getTime() })
        } else {
            await upData(id, { ...values, key: id })
        }
        setOpen(false)
        shopForm.resetFields()
        getShopping()
    }



    const [searchForm] = Form.useForm()
    //     ##$$$%%%^^&&&*****___+++
    const AgeRange = (props) => {
        const { value = ['', ''], onChange } = props
        const [infoValue, setInfoValue] = useState(value)
        return <Space.Compact>
            <Input
                prefix={<Tag color='green'>从</Tag>}
                suffix={<Tag>元</Tag>}
                value={infoValue[0]}
                onChange={(e) => {
                    let newValue = [e.target.value, infoValue[1]]
                    setInfoValue(newValue)
                    onChange(newValue)
                }}
            ></Input>
            <Input
                prefix={<Tag color="green">到</Tag>}
                suffix={<Tag>元</Tag>}
                value={infoValue[1]}
                onChange={(e) => {
                    let newValue = [infoValue[0], e.target.value]
                    setInfoValue(newValue)
                    onChange(newValue)
                }}
            />
        </Space.Compact>
    }
    const onSearch = async (values) => {

        let data = {}
        for (let k in values) {
            if (values[k]) {
                data[k] = values[k]
            }
        }

        if (data.price) {
            data["price_gte"] = data.price[0]
            data["price_lte"] = data.price[1]
            delete data.price
        }
        let newData = { ...data, name_like: data.name }
        delete newData.name

        let res1 = {}
        for (let k in newData) {
            if (newData[k]) {
                res1[k] = newData[k]
            }
        }
        let res = await search(res1)
        setShopping(res)
    }

    return (
        <div>
            <Form name='searchForm' form={searchForm} onFinish={onSearch}>
                <Row gutter={24}>
                    <Col span={6}>
                        <Form.Item label='商品名' name='name'>
                            <Input></Input>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item label='价格' name='price'>
                            <AgeRange></AgeRange>
                        </Form.Item>
                    </Col>
                    <Col span={6}>
                        <Form.Item>
                            <Space>
                                <Button type='primary' htmlType='submit'>搜索</Button>
                                <Button onClick={() => searchForm.resetFields()}>重置</Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <br /><br />
            <Button type='primary' onClick={() => {
                shopForm.resetFields()
                setTitle('新增')
                setId('')
                setOpen(true)
            }}>新增商品</Button>
            <br /><br />
            <Table columns={columns} dataSource={shopping} pagination={false} />;
            <Drawer title={title} placement="right" onClose={onClose} open={open}>
                <Form
                    form={shopForm}
                    name='shopForm'
                    onFinish={onFinish}
                >
                    <Form.Item label='商品名' name='name' required={true} >
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='价格' name='price' required={true}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item>
                        <Space>
                            <Button type='primary' htmlType='submit'>保存</Button>
                            <Button onClick={() => {
                                setOpen(false)
                                shopForm.resetFields()
                            }}>取消</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Drawer>
        </div>
    )
})

export default Type